<!--
 * @Description: 
 * @Author: chenju
 * @Date: 2022-03-22 17:08:41
 * @LastEditors: chenju
 * @LastEditTime: 2023-01-10 15:45:44
-->
<template>
  <CDrawer
    v-model="dialogVisible"
    title="用户详情"
    direction="rtl"
    size="default"
    @close="dialogVisible = false"
  >
    <div class="detail-user-container g-flex--column" v-if="dialogVisible">
      <CDetailCellGroup title="基本信息" class="g-mt8">
        <CDetailCellItem label="用户名称" :value="props.info?.realName" />
        <CDetailCellItem label="用户账号" :value="props.info?.username" />
        <CDetailCellItem label="用户电话" :value="props.info?.phone" />
      </CDetailCellGroup>
    </div>
  </CDrawer>
</template>
<script lang="ts">
export default {
  name: 'UserDetail'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed } from 'vue';
import { CDrawer } from '@/components/CDrawer';
import { CDetailCellGroup, CDetailCellItem } from '@/components/CDetailGroup';
import { IUser } from '@/apis/system/config/model/supplierModel';

interface UserDetailPropsType {
  visible: boolean;
  info: undefined | IUser;
}
const props = withDefaults(defineProps<UserDetailPropsType>(), {});
const emit = defineEmits(['update:visible']);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
</script>
<style lang="scss" scoped>
.detail-user-container {
  height: 100%;
  overflow: hidden;
}
.user-detail-divider {
  margin: 10px 0 9px;
  border-color: #f2f3f5;
}
.mainTb {
  font-size: 14px;
  overflow: auto;
}
.user-tree-wrapper {
  padding: 4px 20px;
}
</style>
